<template>
  <div class="Attendance">

    <p-form layout="inline">
      <p-form-item label="选择日期">
        <p-range-picker v-model="SeletedDateArr" @change="dateChange" />
      </p-form-item>
    </p-form>

    <p-table bordered rowKey="id" :columns="columns" :data-source="data">
      <a slot="name" slot-scope="text">{{ text }}</a>
    </p-table>
  </div>
</template>

<script type="text/javascript">
import { postAction, getAction, deleteAction, putAction } from "@/api/manage";

const columns = [
  {
    title: '日期',
    dataIndex: 'workdate',
    key: 'workdate',
  },
  {
    title: '考勤状态',
    dataIndex: 'gateStatus',
    key: 'gateStatus',
    ellipsis: true,
  },
  {
    title: '起始时间',
    dataIndex: 'startTime',
    key: 'startTime',
    ellipsis: true,
  },
  {
    title: '终止时间',
    dataIndex: 'endTime',
    key: 'endTime',
    ellipsis: true,
  },
];


export default {
  props: {
    empno: String,
  },

  data() {
    return {
      columns,
      data:[],
      SeletedDateArr: [],
      beginDate: '',
      endDate: '',
      url: {
        list: '/mes-manpower/mesHrEmpGate/listByEmpno'
      }      
    }
  },

  watch: {
    empno(){
      Object.assign(this.$data, this.$options.data())
    }
  },

  mounted() {
    // this.getAttendanceInfo()
  },
  methods: {
    getAttendanceInfo(){
      const { beginDate, endDate } = this
      const params = {
        empno:this.empno,
        beginDate,
        endDate,
      }
      getAction(this.url.list, params).then( res => {
        console.log(res.data);
        if (res.success) {
          this.data = res.data
        }
      } )
    },
    dateChange(dates, dateStrings){
      [this.beginDate, this.endDate] = dateStrings
      this.getAttendanceInfo()
    }    
  },
  components: {

  }
}
</script>

<style lang="less" scoped>
</style>
